<template>
    <div>
        <div class="crumbs">
            <Breadcrumb>
                <BreadcrumbItem to="/news"><Icon type="ios-document"/> 资讯列表</BreadcrumbItem>
                <BreadcrumbItem>资讯编辑</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card>
            <!-- 横排表单 -->
            <Form ref="form" :model="form" :label-width="120" :rules="rules">
                <Col :span="8">
                    <FormItem label="标题" prop="title">
                        <Input v-model="form.title" placeholder="请输入姓名"></Input>
                    </FormItem>
                </Col>
                <Col :span="16">
                    <FormItem label="分类" prop="cate_id">
                        <Select v-model="form.cate_id" clearable filterable placeholder="请选择" :transfer="true" style="width:50%">
                            <Option :key="id" v-for="(title, id) in cate" :value="id">{{title}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col :span="24">
                    <FormItem label="详情">
                        <div id="editor" type="text/plain" style="width:1024px;height:500px;margin-bottom:20px;"></div> 
                    </FormItem>
                </Col>
                <div style="clear:both;"></div>
                <div id="btnDiv">
                    <FormItem>
                        <Button icon="md-checkmark" type="primary" @click="submitForm">提交</Button>
                        <Button icon="md-close" @click="back">取消</Button>
                    </FormItem>
                </div>
            </Form>
        </Card>
    </div>
</template>

<script>
    import '../../../static/ueditor/ueditor.config';
    import '../../../static/ueditor/ueditor.all';
    import '../../../static/ueditor/lang/zh-cn/zh-cn';
    var module = 'news';
    export default {
        components: {
            ue: '', 
            uedata: [], 
            xierudata: [],
        },
        data: function(){
            return {
                url: pub.apiDomain + module,
                form: {
                    content: '',
                },
                cate:{},
                site:{},
                custom: [], //自字义字段配置
                //验证规则:需要在form组件加rule="rules",在input等组件上加prop="字段名"
                rules: {
                    title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
                    cate_id: [{ required: true, message: '请选择分类', trigger: 'blur' }],
                },
                editorOption: {
                    // something config
                }
            }
        },
        created(){
            this.getData();
        },
        mounted(){
            UE.delEditor('editor'); //解决首次能成功,第二次进来不显示编辑器问题
            this.ue = UE.getEditor('editor',{ 
                BaseUrl: '', 
                UEDITOR_HOME_URL: '/static/ueditor/', 
                toolbars:[[
                    'fullscreen', 'source', '|', 'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                    'directionalityltr', 'directionalityrtl', 'indent', '|',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                    'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                    /*'simpleupload',*/ 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                    'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                    'print', 'preview', 'searchreplace', 'drafts', 'help'
                ]],
            });
            setTimeout(() => {
                if(this.ue && this.form.content != '') {
                    this.ue.setContent(this.form.content);
                }
            }, 500);
        },
        methods: {
            //加载数据
            getData() {
                let id = this.$route.params.id;
                if(id > 0) {
                    //加载表单数据
                    this.$axios.get(this.url + '/get/id/'+id).then((res) => {
                        this.form = res.d;
                        this.form.cate_id += '_';
                    })
                }else{
                    this.form.site = pub.getCache('site');
                }
                //加载分类列表
                this.$axios.get(pub.apiDomain + '/cate/map/module/'+module).then((res) => {
                    this.cate = res.d;
                })
                //站点列表
                this.site = pub.getCache('site_list');
            },
            onEditorBlur({ editor, html, text }) {
                console.log(html);
            },
            back(){
                this.$router.push('/news');
            },
            submitForm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.form.content = this.ue.getContent();
                        this.$axios.post(this.url + '/save', this.form).then((res) => {
                            this.$Message.success('保存成功！');
                            this.$router.push('/'+module);
                        })
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
<<style scoped>
#btnDiv{
    position: fixed;
    top: 144px;
    right: 60px;
}
</style>
